<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <title>sCanvas – JavaScriptová knihovna pro vykreslování na HTML5 Canvas</title>
    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/black-tie/jquery-ui.css" rel="stylesheet">
    <link href="css/jquery.tocify.css" rel="stylesheet">
    <link href="css/prettify.css" type="text/css" rel="stylesheet" />
    <link href="css/styles.css" type="text/css" rel="stylesheet" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style>

@media (max-width: 767px) {
    #toc {
        position: relative;
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
}
    </style>
  </head>

  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">sCanvas</a>

          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">Úvod</a></li>
              <li><a href="core.html">Jádro</a></li>
              <li><a href="objects.html">Objekty</a></li>
              <li><a href="animations.html">Animace</a></li>
              <li class="active"><a href="events.html">Události</a></li>
              <li><a href="groups.html">Skupiny</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3 tocify">
          <div id="toc">
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>sCanvas – Události</h1>
          </div>
		
		<h2>Práce s událostmi</h2>
		<div class="method well">
			<h3>obj.bind()</h3>
			<div class="syntax">
				<strong>obj.bind(typ, fn)</strong>
				<div>
					<span>typ – string</span>
					<p>Typ události.</p>
				</div>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Naváže na objekt funkci, která je pak vykonána, pokud nastane daná událost.</p>
		</div>
		
		<div class="method well">
			<h3>obj.trigger()</h3>
			<div class="syntax">
				<strong>obj.trigger(typ [, data ])</strong>
				<div>
					<span>typ – string</span>
					<p>Typ události.</p>
				</div>
				<div>
					<span>data – array</span>
					<p>Data předána jako argumenty navázané funkci.</p>
				</div>
			</div>
			<div class="syntax">
				<strong>obj.trigger(event [, data ])</strong>
				<div>
					<span>event – CanvasEvent</span>
					<p>Objekt události.</p>
				</div>
				<div>
					<span>data – array</span>
					<p>Data předána jako argumenty navázané funkci.</p>
				</div>
			</div>
			<p>Vyvolá specifikovanou událost.</p>
			<p>Pokud byla definována data, jsou tato předána funkci jako její argumenty.</p>
		</div>
			
		<div class="method well">
			<h3>obj.unbind()</h3>
			<div class="syntax">
				<strong>obj.unbind([ typ [, fn ]])</strong>
				<div>
					<span>typ – string</span>
					<p>Typ události.</p>
				</div>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Zruší navázání funkce na událost.</p>
			<p>Pokud je specifikován typ události i funkce, je zrušena pouze tato.</p>
			<p>Pokud je určen pouze typ události, jsou zrušeny všechny funkce registrované pro danou událost.</p>
			<p>Nebyl-li předán žádný argument, jsou z objektu odstraněny všechny navázané funkce.</p>
		</div>
		
		<h2>Klik myši</h2>
		<div class="method well">
			<h3>obj.click()</h3>
			<div class="syntax">
				<strong>obj.click([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolána při kliku na objekt.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("click", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("click")</code>.</p>
		</div>
		
		<div class="method well">
			<h3>obj.dblclick()</h3>
			<div class="syntax">
				<strong>obj.dblclick([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolána při dvojkliku na objekt.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("dblclick", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("dblclick")</code>.</p>
		</div>
		
		<div class="method well">
			<h3>obj.mousedown()</h3>
			<div class="syntax">
				<strong>obj.mousedown([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolána při stisknutí tlačitka myši nad objektem.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("mousedown", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("mousedown")</code>.</p>
		</div>
		
		<div class="method well">
			<h3>obj.mouseup()</h3>
			<div class="syntax">
				<strong>obj.mouseup([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolána při uvolnění tlačitka myši nad objektem.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("mouseup", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("mouseup")</code>.</p>
		</div>
		
		<h2>Pohyb myši</h2>
		<div class="method well">
			<h3>obj.mouseenter()</h3>
			<div class="syntax">
				<strong>obj.mouseenter([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolána při vstupu kurzoru myši nad objekt.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("mouseenter", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("mouseenter")</code>.</p>
		</div>
		
		<div class="method well">
			<h3>obj.hover()</h3>
			<div class="syntax">
				<strong>obj.hover(fnIn [, fnOut ])</strong>
				<div>
					<span>fnIn – function()</span>
					<p>Funkce vykonaná při vstupu na objekt.</p>
				</div>
				<div>
					<span>fnOut – function()</span>
					<p>Funkce vykonaná při opuštění objektu.</p>
				</div>
			</div>
			<p>Naváže na objekt funkci <code>fnIn</code>, která je vykonána při vstupu kurzoru myši na objekt.</p>
			<p>Při opuštění objektu je vykonána funkce <code>fnOut</code>, je-li předána, jinak je opět vykonána <code>fnIn</code>.</p>
		</div>
		
		<div class="method well">
			<h3>obj.mouseleave()</h3>
			<div class="syntax">
				<strong>obj.mouseleave([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolána při opuštění objektu kurzorem myši.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("mouseleave", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("mouseleave")</code>.</p>
		</div>
		
		<div class="method well">
			<h3>obj.mousemove()</h3>
			<div class="syntax">
				<strong>obj.mousemove([ fn ])</strong>
				<div>
					<span>fn – function()</span>
					<p>Funkce vykonaná při události.</p>
				</div>
			</div>
			<p>Událost vyvolávána při pohybu kurzoru myši nad objektem.</p>
			<p>S argumentem slouží jako zkratka pro <code>bind("mousemove", fn)</code>.</p>
			<p>Bez argument slouží jako zkratka pro <code>trigger("mousemove")</code>.</p>
		</div>
		
      </div><!--/row-->
	  
      <div class="navbar" style="margin:0 auto;width:45%;">
        <p>
            Copyright &copy; 2013 Daniel Bielczyk
        </p>
      </div>
    </div><!--/.fluid-container-->
  </div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.custom.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/history.js"></script>
    <script src="js/jquery.tocify.min.js"></script>
    <script src="js/prettify.js"></script>
    <script src="js/githubrepo.js"></script>
    <script>
        $(function() {

            $("#toc").tocify({ selectors: "h2, h3, h4", scrollTo: 60, highlightOffset: 60, extendPage: true });

            prettyPrint();

            $(".optionName").popover({ trigger: "hover" });

            $("a[href='#']").click(function(event) {
 
                event.preventDefault();

            });

        });
    </script>
  </body>
</html>